<template>
    <div class="header">
        <div class="header-left ">
            <!--使用iconfont字体图标-->
            <i class="iconfont">&#xe63b;</i>
        </div>
        <div class="header-input">
            <i class="iconfont">&#xe622;</i>
            <input type="text" class="header-input-item"  placeholder="输入城市/景点/游玩主题" />
        </div>
       <router-link to="/city" >
           <!--通过this.$store.state获取vuex中的数据-->
           <div class="header-right iconfont">{{this.city}}&#xe65e;</div>
       </router-link>
    </div>
</template>

<script>
  import {mapState} from 'vuex' // 引入快捷获取state
  
  export default {
    data: () => ({

    }),
    // 子组件通过注册props获取到父组件v-bind绑定的属性的数据   props设置为一个对象，key为props名 value可以对props的类型进行限制
    props: {},
    methods: {
    
    },
    computed:{
      ...mapState(['city'])
    }
  }
</script>
<style lang="stylus" scoped>
    @import "../assets/varibles.styl"
    // 1rem = html font-size === 50px  rem 单位基于 html 元素的字体大小
     .header {
         background-color:$bgcolor
         display: flex;
         justify-content:space-around;
         align-items center;
         height: 0.86rem;
         color: #fff;
         .header-left {
             width: 1rem;
               box-sizing: border-box;
             padding-left: 0.1rem;
             i {
                 font-size: 0.5rem;
             }
         }
         .header-input {
             flex-grow: 1;
             position: relative
             .header-input-item {
                 border-radius: 0.1rem
                 height:0.58rem
                 box-sizing: border-box;
                 padding-left: (1rem / 2);
                 width:100%;
             }
             i {
                 position: absolute;
                 top:7px;
                 left 5px;
                 color: #666666
             }
         }
         
         .header-right {
             width: 1.4rem;
             text-align: center;
             font-size:0.25rem;
             color: #fff;
             
         }
     }
</style>